<template>
	<view class="fixtop">
		<fixtopVue>
			<template #l>
				<!-- 	<view class="fixtop-l" @click="back">
					<view class="iconfont icon-jiantouyou"></view>
				</view> -->
			</template>
			<template #c>
				<view class="fixtop-c">
					订单详情
					<!-- <view class="">
						<view class="" :class="{ac:issong}" @click="changesong(1)">外卖配送</view>
						<view class="" :class="{ac:!issong}" @click="changesong(0)">到店自取</view>
					</view> -->
				</view>
			</template>
		</fixtopVue>
		<view class="navbar">
			<view class="" v-for="(i,index) in navbardata" :key="index" @click="changenav(index)"
				:class="{selectnv:navindex==index}">{{i.t}}</view>
		</view>
	</view>
	<view class="" :style="{height:heights,marginTop:'80rpx'}"></view>

	<view class="conbox">
		<ordercard @shuaxin="shuaxins" v-for="i in showdata" :key="i.id" :data="i"></ordercard>
		<view class="" v-if="!showdata.length" style="font-size: 25rpx;text-align: center;margin-top: 20rpx;">暂无该订单</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getstatusheight,
		gettitleheight
	} from '@/utils/getsysteminfo.js'
	import fixtopVue from '../../components/fixtop/fixtop.vue';
	import ordercard from '@/components/ordercard/ordercard.vue'
	import {
		getorders
	} from '@/api/index.js'
	import userinfo from "../../store/userinfo";
	const heights = getstatusheight() + gettitleheight() + 'px'
	const useuserinfo = userinfo()
	const orderdata = ref()
	const showdata = ref([])
	const issong = ref(0)
	const navindex = ref(0)
	const navbardata = [{
			t: "待确认",
			v: "0"
		},
		{
			t: "派送中",
			v: "1"
		},
		{
			t: "已送达",
			v: "2"
		},
		{
			t: "已取消",
			v: "3"
		}
	]
	onShow(() => {
		getorderdata()
	})
	const shuaxins=()=>{
		getorderdata()
	}
	const changenav = e => {
		navindex.value = e
		showdata.value = orderdata.value.filter(ee => ee.shoperstatus == e)
	}
	const changesong = (e) => {
		issong.value = e
	}
	const getorderdata = async () => {
		const rudata = await getorders(useuserinfo.shoperinfo.id)
		if (rudata.code == 200) {
			orderdata.value = rudata.data
			showdata.value = rudata.data.filter(e => e.shoperstatus == navbardata[navindex.value].v)

		}
	}
</script>

<style scoped lang="scss">
	.navbar {
		height: 80rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		font-size: 25rpx;

		>view {
			height: 40rpx;
		}
	}

	.conbox {
		height: calc(100vh - v-bind(heights) - 80rpx);
		background-color: #eee;
		overflow: auto;
	}

	.selectnv {
		position: relative;
		color: #ff644d;

		&:before {
			content: "";
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			height: 5rpx;
			width: 45%;
			background-color: #ff644d;
			border-radius: 3rpx;
		}
	}

	.fixtop {
		background-color: #ff644d;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;

		.fixtop-l,
		.fixtop-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
		}

		.fixtop-l {
			padding-left: 20rpx;

			.iconfont {
				transform: rotate(180deg);
				font-size: 25rpx;
			}
		}

		.fixtop-c {
			justify-content: center;
			font-size: 31rpx;
			color: #fff;

			>view {
				width: 80%;
				height: 60rpx;
				border-radius: 60rpx;
				background-color: rgba(255, 255, 255, 0.5);
				display: flex;
				align-items: center;
				overflow: hidden;

				>view {
					color: #fff;
					width: 50%;
					height: 100%;
					font-size: 25rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.ac {
					background-color: #fff;
					color: orange;
				}
			}
		}
	}
</style>